<template>
  <div class="page-main">
    <group class="page-main-head">
      <cell>
        <div slot="title"
             class="title">
          {{pageData[0].ContractName}}
        </div>
        <div slot="inline-desc">
          <span class="cell-desc">合同编号:&nbsp;
            <span class="form-title">{{pageData[0].ContractCode}}</span>
          </span>
          <span class="cell-desc">所属项目:&nbsp;
            <span class="form-title">{{pageData[0].ProjectNameList}}</span>
          </span>
          <span class="cell-desc">甲方单位:&nbsp;
            <span class="form-title">{{pageData[0].JfProviderName}}</span>
          </span>
          <span class="cell-desc">乙方单位:&nbsp;
            <span class="form-title">{{pageData[0].YfProviderName}}</span>
          </span>
        </div>
      </cell>
      <cell>
        <div slot="inline-desc">
          <div class="left">
            <span class="cell-desc">签约日期</span>
            <span class="cell-desc danger-text">{{pageData[0].SignDate|formatDate}}</span>
          </div>
          <div class="rigth">
            <span class="cell-desc">合同金额</span>
            <span class="cell-desc danger-text">{{pageData[0].HtAmount/10000|formatMoney}}万元</span>
          </div>
        </div>
  
      </cell>
  
    </group>
    <group class="page-main-nav">
      <tab :line-width="3"
           active-color="#DC220B">
        <tab-item selected
                  @on-item-click="changeTab(1)">结算列表</tab-item>
        <tab-item @on-item-click="changeTab(2)">付款申请</tab-item>
        <tab-item @on-item-click="changeTab(3)">履约评估</tab-item>
      </tab>
  
    </group>
    <group v-show="currentTab===1">
      <cell>
        <div slot="title"
             class="title">
          <span class="span-red"></span>
          结算列表
        </div>
      </cell>
      <cell  v-for="(item,index) in hTBalanceData" :key="index" >
        <div slot="inline-desc">
          <span class="cell-desc">
            <div class="text-left">
              批次名称
            </div>
            <div class="text-rigth">
              {{item.BatchName}}
            </div>
          </span>
          <span class="cell-desc">
            <div class="text-left">
              结算申请日期
            </div>
            <div class="text-rigth">
               {{item.ApplyDate|fDate}}
            </div>
          </span>
          <span class="cell-desc">
            <div class="text-left">
              结算申请资源完成日期
            </div>
            <div class="text-rigth">
               {{item.ApproveDateSecond|fDate}}
            </div>
          </span>
          <span class="cell-desc">
            <div class="text-left">
              成本部结算审批已通过日期
            </div>
            <div class="text-rigth">
                {{item.CbBossPassDate|fDate}}
            </div>
          </span>
           <span class="cell-desc">
            <div class="text-left">
              运营管理中心复核已通过日期
            </div>
            <div class="text-rigth">
               {{item.YyBossPassDate|fDate}}
            </div>
          </span>
            <span class="cell-desc">
            <div class="text-left">
              结算批准日期
            </div>
            <div class="text-rigth">
              {{item.YyBossPassDate|fDate}}
            </div>
          </span>
        </div>
      </cell>
    </group>

    <group v-show="currentTab===2">
      <cell>
        <div slot="title"
             class="title">
          <span class="span-red"></span>
          付款申报
        </div>
      </cell>
      <cell v-for="(item,index) in fkApplyData" :key="index">
        <div slot="inline-desc">
           <span class="cell-desc">
            {{item.FkjhName}}
           </span>
          <span class="cell-desc">
            <div class="text-left font-weight">
               {{item.ApplyAmount}}
            </div>
            <div class="text-rigth font-weight">
              {{item.ApproveState}}
            </div>
          </span>
         
        </div>
      </cell>
    </group>

     <group v-show="currentTab===3">
      <cell>
        <div slot="title"
             class="title">
          <span class="span-red"></span>
          履约评估
        </div>
      </cell>
      <cell v-for="(item,index) in pgData" :key="index">
        <div slot="inline-desc" v-show="item.QuDefineName===null">
          <span class="cell-desc">
            <div class="text-left">
              {{item.SubjectName}}
            </div>
            <div class="text-rigth">
              正常
            </div>
          </span>       
        </div>

         <div slot="inline-desc" v-show="item.QuDefineName!==null">
          <span class="cell-desc">
            <div class="text-left">
               {{item.SubjectName}}
            </div>
            <div class="text-rigth" style="color:red">
              异常             
            </div>
          </span>
           <div style="color:red">
                  {{item.QuDefineName}}问卷不及格
          </div>
        </div>
      </cell>
    </group>
  
  </div>
</template>

<script>
import { Search, Tab, TabItem, Group, Cell, XButton, dateFormat } from 'vux'
import { MyContractService } from '../../service/Services.js'
//  import _ from 'lodash'

export default {
  name: 'CellBtn',
  components: {
    Search,
    Tab,
    TabItem,
    Group,
    Cell,
    XButton
  },
  data () {
    return {
      searchText: '',
      pageData: [],
      currentTab: 1,
      hTBalanceData: [],
      pgData: [],
      fkApplyData: []
    }
  },
  methods: {
    loadData () {
      this.$vux.loading.show({
        text: '加载中...'
      })
      let providerGUID = this.$store.getters.getUserInfo.ProviderGUID
      let contractGUID = this.$route.query.ContractGUID
      MyContractService.GetMyContractDetail(providerGUID, contractGUID).then((res) => {
        this.$vux.loading.hide()
        this.pageData = res.Data
      })
      MyContractService.GetHTBalanceApply(providerGUID, contractGUID).then((res) => {
        this.$vux.loading.hide()
        this.hTBalanceData = res.Data
      })
      MyContractService.GetPGSubject(providerGUID, contractGUID).then((res) => {
        this.$vux.loading.hide()
        this.pgData = res.Data
      })
      MyContractService.GetFkjhApply(providerGUID, contractGUID).then((res) => {
        this.$vux.loading.hide()
        this.fkApplyData = res.Data
      })
    },
    changeTab (tab) {
      this.currentTab = tab
    }
  },
  computed: {
  },
  filters: {
    fDate (myDate) {
      if (myDate === null) {
        return '暂无'
      } else {
        let msec = myDate.match(/\d+[+]\d+/gi)
        return dateFormat(new Date(Number.parseInt(msec)), 'YYYY-MM-DD')
      }
    },
    fPgText (value) {
      if (value === null) {
        return '正常'
      }
    }
  },
  created () {
    this.loadData()
  }
}
</script>
<style scoped lang="less">
.page-main{
  font-family: PingFangSC-Regular;
}
.title {
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #000000;
  letter-spacing: 0;
  font-weight: bold;
}

.cell-desc {
  display: block;
  margin: 5px 0px;
  word-break: keep-all;
  /* 不换行 */
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis;
  /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

.form-title {
  font-weight: bold;
  color: #000000
}

.left {
  width: 50%;
  float: left;
}

.rigth {
  width: 50%;
  float: right;
}

.text-left {
  float: left;
  color: #888888;
}
.font-weight{
  font-weight: bold;
  color:#000000;
  font-size: 16px;
}
.text-rigth {
  float: right;
  color:#000000;
}

.danger-text {
  font-size: 16px;
  color: #DC220B;
  letter-spacing: 0;
  font-weight: bold;
}

.span-red {
  display: inline-block;
  height: 25px;
  width: 4px;
  background: #DC220B;
  position: relative;
  top: 6px;
  margin-right: 10px;
}
</style>
